<template>
  <div class="app-container p-6">
    <div class="card">
      <div class="d-flex items-center mb-4">
        <div class="text-primary" style="font-weight:600;">文件分享管理</div>
        <div class="d-flex" style="gap:8px; margin-left:auto;">
          <el-input v-model="fileId" placeholder="输入文件ID" clearable style="width:300px" @keyup.enter="loadList" />
          <el-button size="small" type="primary" @click="loadList">查询</el-button>
          <el-button size="small" @click="openCreateDialog" :disabled="!fileId">创建分享</el-button>
        </div>
      </div>

      <div class="bg-panel radius-lg p-0">
        <el-table :data="list" v-loading="loading" style="width:100%">
          <el-table-column prop="shareCode" label="分享码" width="160" />
          <el-table-column prop="shareType" label="类型" width="80" />
          <el-table-column prop="validUntil" label="有效期" width="180" />
          <el-table-column prop="accessCount" label="访问" width="80" />
          <el-table-column prop="downloadCount" label="下载" width="80" />
          <el-table-column prop="status" label="状态" width="80" />
          <el-table-column label="操作" width="300" fixed="right">
            <template #default="{ row }">
              <el-button text type="primary" @click="copyShareUrl(row)">复制链接</el-button>
              <el-button text type="primary" @click="toggle(row)">{{ row.status === 1 ? '禁用' : '启用' }}</el-button>
              <el-button text type="primary" @click="openEditDialog(row)">编辑</el-button>
              <el-popconfirm title="确定删除该分享吗？" @confirm="remove(row)">
                <template #reference>
                  <el-button text type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" :title="editing ? '编辑分享' : '创建分享'" width="600px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-form-item label="分享类型">
          <el-select v-model="form.shareType" placeholder="选择类型">
            <el-option :value="0" label="私密(密码)" />
            <el-option :value="1" label="公开" />
          </el-select>
        </el-form-item>
        <el-form-item label="访问密码" v-if="form.shareType === 0">
          <el-input v-model="form.password" placeholder="设置访问密码" />
        </el-form-item>
        <el-form-item label="有效期">
          <el-date-picker v-model="form.validUntil" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择时间" />
        </el-form-item>
        <el-form-item label="访问上限">
          <el-input-number v-model="form.maxAccessCount" :min="0" :max="999999" />
        </el-form-item>
        <el-form-item label="下载上限">
          <el-input-number v-model="form.maxDownloadCount" :min="0" :max="999999" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.description" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { shareApi, type ShareLinkVO } from '@/api/share'

const fileId = ref('')
const list = ref<ShareLinkVO[]>([])
const loading = ref(false)

const dialogVisible = ref(false)
const editing = ref(false)
const editingId = ref<string | null>(null)
const form = ref({
  shareType: 1,
  password: '',
  validUntil: '',
  maxAccessCount: 0,
  maxDownloadCount: 0,
  description: ''
})

const loadList = async () => {
  if (!fileId.value) return
  loading.value = true
  try {
    const { data } = await shareApi.listByFile(fileId.value)
    list.value = data || []
  } finally {
    loading.value = false
  }
}

const openCreateDialog = () => {
  editing.value = false
  editingId.value = null
  form.value = { shareType: 1, password: '', validUntil: '', maxAccessCount: 0, maxDownloadCount: 0, description: '' }
  dialogVisible.value = true
}

const openEditDialog = (row: ShareLinkVO) => {
  editing.value = true
  editingId.value = row.id
  form.value = {
    shareType: row.shareType,
    password: '',
    validUntil: row.validUntil || '',
    maxAccessCount: row.maxAccessCount || 0,
    maxDownloadCount: row.maxDownloadCount || 0,
    description: row.description || ''
  }
  dialogVisible.value = true
}

const submit = async () => {
  try {
    if (!fileId.value) return ElMessage.warning('请先输入文件ID')
    if (editing.value && editingId.value) {
      await shareApi.update(editingId.value, form.value)
      ElMessage.success('更新成功')
    } else {
      await shareApi.create({ fileId: fileId.value, ...form.value })
      ElMessage.success('创建成功')
    }
    dialogVisible.value = false
    loadList()
  } catch (e: any) {
    ElMessage.error(e?.message || '操作失败')
  }
}

const toggle = async (row: ShareLinkVO) => {
  try {
    if (row.status === 1) {
      await shareApi.disable(row.id)
      ElMessage.success('已禁用')
    } else {
      await shareApi.enable(row.id)
      ElMessage.success('已启用')
    }
    loadList()
  } catch (e: any) {
    ElMessage.error(e?.message || '操作失败')
  }
}

const remove = async (row: ShareLinkVO) => {
  try {
    await shareApi.delete(row.id)
    ElMessage.success('删除成功')
    loadList()
  } catch (e: any) {
    ElMessage.error(e?.message || '删除失败')
  }
}

const copyShareUrl = async (row: ShareLinkVO) => {
  const base = import.meta.env.VITE_PUBLIC_BASE_URL || window.location.origin
  const url = `${base}/#/share/${row.shareCode}`
  await navigator.clipboard.writeText(url)
  ElMessage.success('已复制分享链接')
}

</script>

<style scoped>
</style>


